import 'package:ducafe_ui_core/ducafe_ui_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_reactive_value/flutter_reactive_value.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:kudos/core/utils/kudo_colors.dart';
import '../home/dwelling_screen.dart';
import '../community/gathering_screen.dart';
import '../information/knowledge_screen.dart';
import '../profile/identity_screen.dart';

class MainContainerScreen extends StatefulWidget {
  const MainContainerScreen({super.key});

  @override
  State<MainContainerScreen> createState() => _MainContainerScreenState();
}

class _MainContainerScreenState extends State<MainContainerScreen> {
  final ReactiveValueNotifier<int> _currentPageIndex =
      ReactiveValueNotifier<int>(0);

  final List<Widget> _screenCollection = const [
    DwellingScreen(),
    GatheringScreen(),
    KnowledgeScreen(),
    IdentityScreen(),
  ];

  void _handleNavigationTap(int index) {
    _currentPageIndex.value = index;
  }

  @override
  void dispose() {
    _currentPageIndex.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final currentIndex = _currentPageIndex.reactiveValue(context);

    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        clipBehavior: Clip.none,
        children: [
          IndexedStack(index: currentIndex, children: _screenCollection),
          Positioned(
            left: 16.w,
            right: 16.w,
            bottom: 54.h,
            child: _buildCustomNavigationBar(currentIndex),
          ),
        ],
      ),
    );
  }

  Widget _buildCustomNavigationBar(int currentIndex) {
    final List<NavigationBarItem> navigationItems = [
      NavigationBarItem(
        svgPath: 'assets/svg/home.svg',
        label: 'FRONT PAGE',
        index: 0,
      ),
      NavigationBarItem(
        svgPath: 'assets/svg/community.svg',
        label: 'COMMUNITY',
        index: 1,
      ),
      NavigationBarItem(
        svgPath: 'assets/svg/information.svg',
        label: 'INFORMATION',
        index: 2,
      ),
      NavigationBarItem(
        svgPath: 'assets/svg/profile.svg',
        label: 'PERSONAL',
        index: 3,
      ),
    ];

    return Container(
      clipBehavior: Clip.none,
      padding: EdgeInsets.only(bottom: 3.h),
      decoration: BoxDecoration(
        color: KudoColors.black,
        borderRadius: BorderRadius.circular(50.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.1),
            blurRadius: 10,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Container(
        height: 50.h,
        decoration: BoxDecoration(
          color: KudoColors.yellow,
          borderRadius: BorderRadius.circular(50.r),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha: 0.1),
              blurRadius: 10,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        clipBehavior: Clip.none,
        child: Stack(
          clipBehavior: Clip.none,
          children:
              navigationItems.asMap().entries.map((entry) {
                final index = entry.key;
                final item = entry.value;
                final isSelected = currentIndex == item.index;

                final containerWidth = context.screenWidth - 32.w;
                final itemWidth = containerWidth / 4;
                final leftPosition = itemWidth * index + itemWidth / 2 - 40.w;

                return AnimatedPositioned(
                  duration: 300.milliseconds,
                  curve: Curves.easeInOut,
                  left: leftPosition,
                  top: isSelected ? -20.h : 7.h,
                  child: _buildNavigationItem(item, isSelected),
                );
              }).toList(),
        ),
      ),
    );
  }

  Widget _buildNavigationItem(NavigationBarItem item, bool isSelected) {
    return [
          Container(
            width: 36.w,
            height: 36.w,
            decoration: BoxDecoration(
              color: KudoColors.yellow,
              shape: BoxShape.circle,
            ),
            child: Center(
              child: SvgPicture.asset(
                item.svgPath,
                width: 20.w,
                height: 20.w,
                colorFilter: ColorFilter.mode(
                  KudoColors.black,
                  BlendMode.srcIn,
                ),
              ),
            ),
          ),

          Container(
            width: 80.w,
            height: 16.h,
            alignment: Alignment.center,
            child:
                isSelected
                    ? Text(item.label)
                        .fontSize(12.sp)
                        .textColor(Colors.black)
                        .fontWeight(FontWeight.w600)
                        .fontFamily(GoogleFonts.lato().fontFamily)
                        .textAlignment(TextAlign.center)
                    : null,
          ).paddingTop(2.h),
        ]
        .toColumn(mainAxisSize: MainAxisSize.min)
        .inkWell(onTap: () => _handleNavigationTap(item.index));
  }
}

class NavigationBarItem {
  final String svgPath;
  final String label;
  final int index;

  NavigationBarItem({
    required this.svgPath,
    required this.label,
    required this.index,
  });
}
